<template>
    <div class="content-box">
      <TreeFilter
        label="name"
        title="部门列表(单选)"
        :request-api="getUserDepartmentAPI"
        :default-value="treeFilterValue.departmentId"
        @change="changeTreeFilter"
      />
      <TreeFilter
        title="部门列表(多选)"
        multiple
        label="name"
        :request-api="getUserDepartmentAPI"
        :default-value="treeFilterValue1.departmentId"
        @change="changeTreeFilter1"
      />
      <div class="descriptions-box card">
        <span class="text"> 树形筛选器 🍓🍇🍈🍉</span>
        <el-descriptions title="配置项 📚" :column="1" border>
          <el-descriptions-item label="requestApi"> 请求分类数据的 api </el-descriptions-item>
          <el-descriptions-item label="data"> 分类数据，如果有分类数据，则不会执行 api 请求 </el-descriptions-item>
          <el-descriptions-item label="title"> treeFilter 标题 </el-descriptions-item>
          <el-descriptions-item label="id"> 选择的id，默认为 “id” </el-descriptions-item>
          <el-descriptions-item label="label"> 显示的label，默认为 “label” </el-descriptions-item>
          <el-descriptions-item label="multiple"> 是否为多选，默认为 false </el-descriptions-item>
          <el-descriptions-item label="defaultValue"> 默认选中的值 </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </template>
  
  <script setup lang="ts" name="treeFilter">
  import { reactive } from "vue";
  import { ElMessage } from "element-plus";
  import { getUserDepartmentAPI } from "@/api/modules/user";
  import TreeFilter from "@/components/TreeFilter/index.vue";
  
  const treeFilterValue = reactive({ departmentId: "1" });
  const changeTreeFilter = (val: string) => {
    ElMessage.success(`你选择了 id 为 ${val} 的数据🤔`);
    treeFilterValue.departmentId = val;
  };
  
  const treeFilterValue1 = reactive({ departmentId: ["11"] });
  const changeTreeFilter1 = (val: string[]) => {
    ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
    treeFilterValue1.departmentId = val;
  };
  </script>
  
  <style scoped lang="scss">
.content-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .descriptions-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }
}
  </style>
  